<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | General Form Elements</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/dist/admin/css/optimization.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
        </ul>


        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->

            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">个人操作</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">操作面板</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="/adminRest/v1/token?_ajax_method=DELETE" class="dropdown-item dropdown-footer" onclick="logout(this);"
                       data-rest-type="DELETE">退出登录</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="/AdminLTE-3.0.5/dist/img/AdminLTELogo.png"
                 alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header" id="sidebar-menu"></li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>General Form</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">General Form</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-12">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Quick Example</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form role="form" id="ajaxFormProduct" method="POST" action="/adminRest/v1/product">
                                <input id="_ajax_method" type="hidden" name="_ajax_method" value="PUT">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="product_name">名称</label>
                                        <input name="product_name" type="text" class="form-control" id="product_name"
                                               placeholder="标题">
                                    </div>

                                    <div class="form-group">
                                        <label for="product_thumbnail">头图
                                            <small>复制图片地址到下面的输入框，或者从本地上传一个</small>
                                        </label>
                                        <div class="row">
                                            <div class="col-10">
                                                <input name="product_thumbnail" type="text" class="form-control"
                                                       id="product_thumbnail"
                                                       placeholder="排序" data-image-preview="product_thumbnail-preview">
                                            </div>
                                            <div class="col-2">
                                                <input type="file" class="custom-file-input" id="image_upload">
                                                <label class="input-group-text position-absolute fixed-top"
                                                       for="image_upload">新上传一个</label>
                                            </div>
                                        </div>
                                        <img style="max-width: 200px;" src="http://placehold.it/200x200?text=preview"
                                             id="product_thumbnail-preview" class="img-fluid img-thumbnail"/>
                                    </div>

                                    <div class="form-group">
                                        <label for="price">价格</label>
                                        <input name="price" type="text" class="form-control" id="price"
                                               placeholder="路径">
                                    </div>

                                    <div class="form-group">
                                        <label for="classification_1">大分类</label>
                                        <select multiple name="classification_1" id="classification_1">
                                            <option value="女性用品">女性用品</option>
                                            <option value="男性用品">男性用品</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="classification_2">子分类</label>
                                        <select multiple name="classification_2" id="classification_2">
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="description">描述</label>
                                        <textarea name="description" id="description" type="text" class="form-control"
                                                  placeholder="描述"></textarea>
                                    </div>

                                    <div class="form-group">
                                        <div class="mb-3">
                                            <textarea data-editor="textarea" name="content_detail" id="content_detail"
                                                      class="textarea" placeholder="Place some text here"
                                                      style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                                        </div>
                                    </div>

                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.card -->

                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">

    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- bs-custom-file-input -->
<script src="/AdminLTE-3.0.5/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
<!-- AdminLTE App -->
<script src="/AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>

<script src="/plugins/jquery.form.js"></script>
<script src="/plugins/jquery-tmpl/jquery.tmpl.js"></script>



<script id="sidebar-level-1" type="text/x-jquery-tmpl">
{{if $data._child}}
<li class="nav-item has-treeview">
    <a href="${pathname}" class="nav-link">
    <i class="nav-icon fas fa-tachometer-alt"></i>
    <p>
    ${title}
    <i class="right fas fa-angle-left"></i>
    </p>
    </a>
    <ul class="nav nav-treeview">
    {{tmpl($data._child) '#sidebar-level-1'}}
</ul>
</li>
{{else}}
<li class="nav-item">
    <a href="${pathname}" class="nav-link">
    <i class="nav-icon far fa-image"></i>
    <p>
    ${title}
    </p>
    </a>
    </li>
{{/if}}





</script>
<link rel="stylesheet" href="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.css">
<script src="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.js"></script>
<script src="/dist/js/admin.common.js"></script>
<link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/summernote/summernote-bs4.css">

<script src="/dist/js/classifiction.js"></script>
<script>
    $.ajaxSetup({
        async: true,
        beforeSend: function (xhr, data) {
            let token = window.localStorage.site_admin_token;
            xhr.setRequestHeader("Accept", "application/json");
            // xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
        },
        complete: function (xhr, status) {
            if (typeof(xhr.responseJSON.code) !== "undefined" && xhr.responseJSON.code === 401) {
                showToast(xhr.responseJSON.msg);
            }
        }
    });

    $(function () {
        _init_classifiction();

        window.sourceUrl = window.location.origin + "/adminRest/v1/product";
        let id = getId();
        loadContent(window.sourceUrl + '/' + id);

        $("#ajaxFormProduct").ajaxForm({
            url: window.sourceUrl + '/' + id,
            async: true,
            dataType:
                'json',
            beforeSend: function (xhr, data) {
                let token = window.localStorage.site_admin_token;
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                if(data.data.hasOwnProperty('delete')){
                    data.data.delete('files');
                }
            },
            success: function (res) {
                if (res.code === 200) {
                    showToast(res.msg, 'go-back');
                } else {
                    showToast(res.msg);
                }
            }
        });


        $("#product_thumbnail").change(function () {
            $("#product_thumbnail-preview").attr("src", $(this).val());
        });

        /**
         * @see https://summernote.org/deep-dive/
         * @see https://www.thefuturetrends.com/summernote-image-upload-updated/
         * @see https://webkul.com/blog/image-upload-summernote/
         * @see https://stackoverflow.com/questions/21628222/summernote-image-upload
         */
        $('.textarea').summernote({
            lang: 'zh-CN',
            callbacks: {
                onImageUpload: function (files, editor, welEditable) {
                    sendFiles(files, editor, welEditable);
                },
                // onImageLinkInsert: function(url) {
                //     // url is the image url from the dialog
                //     $img = $('<img>').attr({ src: url })
                //     $('.textarea').summernote('insertNode', $img[0]);
                // }
            }
        });

        /**
         * 将来可以把这特殊处理，发现是其他网站url 直接转存到本站中
         */
        $('.textarea').on('summernote.image.link.insert', function (we, url) {
            // url is the image url from the dialog
            $img = $('<img>').attr({src: url}).addClass("img-fluid");
            $('.textarea').summernote('insertNode', $img[0]);
        });

        function sendFiles(files, editor, welEditable) {
            for (let i = 0; i < files.length; i++) {
                sendFile(files[i], editor, welEditable);
            }
        }

        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);
            url = window.location.origin + "/adminRest/v1/uploadImage";
            $.ajax({
                data: data,
                type: "POST",
                url: url,
                cache: false,
                contentType: false,
                processData: false,
                success: function (ret) {
                    let img = new Image();
                    img.src = ret.data.file;
                    img.className = "img-fluid";
                    $('.textarea').summernote('insertNode', img);
                }
            });
        }


        // if (id === '') {
        //     $("#ajaxForm").removeClass("ajaxFormEdit").addClass("ajaxFormAdd");
        //     $("#_ajax_method").val('POST');
        // } else {
        //     $("#ajaxForm").removeClass("ajaxFormAdd").addClass("ajaxFormEdit");
        //     $("#_ajax_method").val('PUT');
        //     loadContent(window.sourceUrl + '/' + id);
        // }


        $("#product_humbnail").change(function () {
            var ua = navigator.userAgent;
            //IE浏览器
            if (ua.indexOf("MSIE") > -1) {
                document.getElementById("uploadPreview").src = document.getElementById("uploadImage").value;
                return false;
            }

            //支持html5 中的写法
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("product_humbnail").files[0]);

            oFReader.onload = function (oFREvent) {
                document.getElementById("product_humbnail-preview").src = oFREvent.target.result;
            };
        });


        /**
         * @see https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
         */
        $("#image_upload").change(function () {
            let formData = new FormData();
            formData.append('file', $('#image_upload')[0].files[0]);
            $.ajax({
                url: window.location.origin + "/adminRest/v1/UploadImage",
                type: 'POST',
                data: formData,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function (ret) {
                    $("#product_thumbnail").val(ret.data.file);
                    $("#product_thumbnail-preview").attr("src", ret.data.file);
                }
            });
        });
    })
</script>
<script src="/AdminLTE-3.0.5/plugins/summernote/summernote-bs4.min.js"></script>

<!-- bs-custom-file-input -->
<script src="/AdminLTE-3.0.5/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        bsCustomFileInput.init();
    });
</script>
</body>
</html>
